<template>
    <div class="new_head" >

        <div class="top_content">
          <img src="../../public/imgs/new_regist/new_regist_head.png" style="width: 100%"/>
        </div>
        <div class="wite_content">
          <div class="item_card">
            <div class="title_h2">2088注册礼包</div>
            <div class="img_content">
              <img src="../../public/imgs/new_regist/ticket_1.png" alt="">
            </div>

          </div>
          <div class="item_card">
            <div class="title_h2">2%加息券</div>
            <div class="img_content">
              <img src="../../public/imgs/new_regist/ticket_2.png" alt="">
            </div>

          </div>
          <div class="item_card">
            <div class="title_h2">专属产品</div>
            <div class="img_content">
              <img src="../../public/imgs/new_regist/ticket_3.png" alt="">
            </div>
          </div>
          <div class="item_card">
            <div class="title_h2">邀请好友投资</div>
            <div class="img_content">
              <img src="../../public/imgs/new_regist/ticket_4.png" alt="">
            </div>
          </div>
          <div class="input-group">
            <div>
              <input style="border-width: 1px;" v-model="formdata.phone" v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('phone') }" type="text" name="phone" maxlength="11" placeholder="请输入手机号码">
            </div>
            <div class="error">
              <span v-show="errors.has('phone')" class="text-style" v-cloak> {{ errors.first('phone')}} </span>
              <span v-show="error" class="text-style" > {{msg}} </span>
            </div>
          </div>

          <div class="input-group">
            <div @click.stop="regist()" class="regist">立即注册福利</div>
          </div>
        </div>
        <div class="buttom_content">
          <div class="title">—&nbsp;&nbsp;  为什么选择我们 &nbsp;&nbsp; —</div>
          <div class="engish_title">
            WHY&nbsp;&nbsp; CHOOSE&nbsp;&nbsp; US?
          </div>
          <div class="item_cards_content">
            <div class="itme">
              <div class="item_card">
                <div class="round"><i ><img class="ionc_1" src="../../public/imgs/new_regist/ionic_5.png"/></i></div>
                <div class="one_title">专业团队</div>
                <div class="secend_title">以用户利益至上</div>
              </div>
              <div class="item_card">
                <div class="round"><i class="ionc_2"><img src="../../public/imgs/new_regist/ionic_2.png"/></i></div>
                <div class="one_title">产品真实</div>
                <div class="secend_title">优选真实合规 </div>
                <div class="secend_title">优选真实合规 </div>
              </div>
            </div>
            <div class="itme">
              <div class="item_card">
                <div class="round"><i class="ionc_3"><img src="../../public/imgs/new_regist/ionic_3.png"/></i></div>
                <div class="one_title">签约存管 </div>
                <div class="secend_title">保障资金安全</div>
              </div>
              <div class="item_card">
                <div class="round"><i class="ionc_4"><img src="../../public/imgs/new_regist/ionic_4.png"/></i></div>
                <div class="one_title">ICP备案 </div>
                <div class="secend_title">业务合规经营 </div>
              </div>
            </div>
            <div class="itme">
              <div class="item_card">
                <div class="round"><i class="ionc_5"><img src="../../public/imgs/new_regist/icon_service.png"/></i></div>
                <div class="one_title">贴心服务</div>
                <div class="secend_title">多渠道客户服务</div>
              </div>
              <div class="item_card">
                <div class="round"><i class="ionc_6"><img src="../../public/imgs/new_regist/ionic_6.png"/></i></div>
                <div class="one_title">信息加密 </div>
                <div class="secend_title">为安全保驾护航 </div>
              </div>
            </div>
          </div>
        </div>
        <div class="download_btn" @click="download()">
          下载优选金融APP领取更多福利
        </div>
        <div class="mask" v-show="mask" @click="closeMask()"> </div>
        <div class="regest_alert" style="border-width: 1px;" v-show="regestMask&&mask">
            <h2>注册</h2>
            <div class="input-group">
              <div>
                <label @click="resateCode()">{{timeDownText}}</label>
                <input style="border-width: 1px;" type="text"  name="code"  placeholder="短信验证码" v-model="formdata.code" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('code') }" />
              </div>
              <div class="error">
                <span v-show="errors.has('code')" class="text-style" v-cloak> {{ errors.first('code')}} </span>
                <span v-show="codeerr" class="text-style"> {{msg}} </span>
              </div>
            </div>
            <div class="input-group">
                <div>
                  <input style="border-width: 1px;" type="password" placeholder="设置登录密码"  v-model="formdata.password" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('password') }" name="password"/>
                </div>
                <div class="error">
                  <span v-show="errors.has('password')" class="text-style" v-cloak> {{ errors.first('password')}} </span>
                </div>
            </div>
            <div class="input-group">
                <div @click="isbtnSure()" class="sbumit_btn">
                  确认
                </div>
            </div>
        </div>
        <div class="success_dilog" v-show="regestSuccess">
          <div class="download_btn" @click="download()">
            立即下载APP
          </div>
        </div>

    </div>

</template>

<script>
import { Toast } from "mint-ui";
import "@/public/libs/VeeValidate";
export default {
  data() {
    return {
      regestSuccess: false,
      mask: false,
      regestMask: false,
      error: false,
      userid: "",
      code: "",
      onceToken: "",
      msg: "",
      codeerr: "",
      checkcode: "", //验证码
      countdown: 60, //验证码循环数
      onceToken: "", //,
      timeDownText: "",
      formdata: {
        phone: "",
        password: "",
        code: ""
      },
      source_channel: "",
      channelHref: {
				"zcldy01":"https://ss.youxuanqb.com/router/mz_sas_plan?a=1&p=7&c=16&d=android-ios&pl=zcldydownload01",
        "zhu_che_luo_di_ye":
          "https://ss.youxuanqb.com/router/mz_sas_plan?a=1&p=7&c=14&d=android-ios&pl=zhu_che_luo_di_ye_download"
      }
    };
  },
  created() {},
  methods: {
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      $(".regest_alert").css({ top: scrollTop + 250 + "px" });
    },
    download() {
      this.mask = false;
      this.regestMask = false;
      this.regestSuccess = false;
      if (this.source_channel) {
        if (this.channelHref[this.source_channel] != undefined) {
					console.log("fuck");
          window.location.href = this.channelHref[this.source_channel];
        } else {
          window.location.href =
            "http://a.app.qq.com/o/simple.jsp?pkgname=com.preference.mz.android";
        }
      } else {
        window.location.href =
          "http://a.app.qq.com/o/simple.jsp?pkgname=com.preference.mz.android";
      }
      // if (this.Uitis.isAndroid) {
      //   window.location.href =
      //     "http://a.app.qq.com/o/simple.jsp?pkgname=com.preference.mz.android";
      // } else if (this.Uitis.isIPhone) {
      //   window.location.href =
      //     "https://itunes.apple.com/cn/app/id1331848210?mt=8";
      // }
    },
    closeMask() {
      this.mask = false;
      this.regestMask = false;
      this.regestSuccess = false;
    },
    regist() {
      _hmt.push(["_trackEvent", "regist", "click_regist", "-", "邀请注册"]);
      if (this.errors.items.length > 0 || this.formdata.phone == "") {
        return;
      }
      this.$http
        .get(this.Interface.getRegOnceToken)
        .then(res => {
          this.onceToken = res.data.data.onceToken;
          return this.$http.get(this.Interface.getRegCod, {
            params: { mobile: this.formdata.phone, onceToken: this.onceToken }
          });
        })
        .then(res => {
          if (res.data.data.error_code == "000000") {
            this.mask = true;
            this.regestMask = true;
            this.countDown();
          } else {
            this.error = true;
            this.msg = res.data.data.error_msg;
            var _this = this;
            setTimeout(function() {
              _this.error = false;
            }, 1000);
          }
        })
        .catch(err => {});
    },
    isbtnSure() {
      var _this = this;
      this.$validator
        .validateAll()
        .then(res => {
          if (res) {
            return this.$http.get(this.Interface.CheckMsgCode, {
              params: {
                mobile: this.formdata.phone,
                checkcode: this.formdata.code
              }
            });
          }
        })
        .then(res => {
          if (res.data.data.error_code == "000000") {
            return this.$http.post(
              this.Interface.setLoginPassword, //注册成功需传将手机号、验证码、密码、推荐人userId
              {
                mobile: this.formdata.phone,
                checkcode: this.formdata.code,
                password: this.formdata.password,
                referee: this.userid,
                code: this.code
              }
            );
          } else {
            Toast({
              message: res.data.data.error_msg,
              position: "top",
              duration: 2000
            });
          }
        })
        .then(res => {
          if (res.data.success == true) {
            this.regestMask = false;
            this.regestSuccess = true;
          } else {
            Toast({
              message: res.data.data.error_msg,
              position: "top",
              duration: 2000
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    resateCode() {
      if (this.countdown !== 0) {
        return;
      }
      this.$http
        .get(this.Interface.getRegOnceToken)
        .then(res => {
          this.onceToken = res.data.data.onceToken;
          return this.$http.get(this.Interface.getRegCod, {
            params: { mobile: this.formdata.phone, onceToken: this.onceToken }
          });
        })
        .then(res => {
          if (res.data.data.error_code == "000000") {
            this.countDown();
          } else {
            this.error = true;
            this.msg = res.data.data.error_msg;
            var _this = this;
            setTimeout(function() {
              _this.error = false;
            }, 1000);
          }
        });
    },
    countDown() {
      if (this.countdown == 0) {
        this.timeDownText = "重新发送";
        this.countdown = 60;
      } else {
        this.timeDownText = "重新获取(" + this.countdown + ")s";
        this.countdown--;
        //console.log("aaa"+this.countdown);
        setTimeout(() => {
          this.countDown();
        }, 1000);
      }
    },
    getCookie(name) {
      var arr,
        reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
      if ((arr = document.cookie.match(reg))) {
        this.source_channel = unescape(arr[2]);
        //console.log(this.source_channel);
      } else {
        this.source_channel = "";
        //console.log("source_channel:"+ this.source_channel);
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.getCookie("source_channel");
  },
  created() {
    this.$watch("mask", function(newValue, oldValue) {
      if (newValue) {
      } else {
        window.location.reload();
      }
    });
    try {
      if (this.Uitis.GetLocationParams("userid")) {
        var uid = this.Uitis.GetLocationParams("userid");
        this.userid = uid;
        console.log(this.userid);
      }

      if (this.Uitis.GetLocationParams("code")) {
        this.code = this.Uitis.GetLocationParams("code");
        console.log(this.code);
      }
    } catch (e) {}
  }
};
</script>
<style lang="less">
.new_head {
  background: url(../../public/imgs/new_regist/suspension.png) -51px 500px no-repeat,
    url(../../public/imgs/new_regist/suspension.png) 500px 1100px no-repeat,
    url(../../public/imgs/new_regist/highlighted.png) center bottom no-repeat,
    #564cd9;
  padding-bottom: 70px;
  position: relative;
  .top_content {
    margin-bottom: -45px;
  }
  .wite_content {
    padding-bottom: 65px;
    background: #fff;
    width: 675px;
    border: 1px solid #ccc;
    border-radius: 15px;
    margin: 0 auto;
    margin-bottom: 100px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    .item_card {
      flex-direction: column;
      align-items: center;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      width: 50%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 25px 0px 42px 0px;
      .img_content {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: auto;
          height: 90px;
        }
      }
      .title_h2 {
        line-height: 46px;
        font-size: 30px;
        width: 100%;
        text-align: center;
        padding-top: 30px;
        padding-bottom: 15px;
        font-weight: 600;
      }
    }
    .input-group {
      display: flex;
      margin-top: 60px;
      width: 100%;
      justify-content: center;
      input {
        width: 580px;
        height: 90px;
        border: 1px solid #ccc;
        border-radius: 15px;
        text-indent: 25px;
        font-size: 30px;
      }
      .regist {
        text-align: center;
        width: 580px;
        height: 80px;
        line-height: 80px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background-color: #ff6391;
        background-image: -webkit-linear-gradient(bottom, #ff6091, #ffd780);
        background-image: -moz-linear-gradient(bottom, #ff6091, #ffd780);
        background-image: -o-linear-gradient(bottom, #ff6091, #ffd780);
        background-image: -ms-linear-gradient(bottom, #ff6091, #ffd780);
        background-image: linear-gradient(to top, #ff6091, #ffd780);
        color: #fff;
        font-size: 36px;
      }
    }
  }
  .buttom_content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: #fff;
    .title {
      text-align: center;
      font-size: 40px;
      width: 100%;
    }
    .engish_title {
      font: bold 20px Arial, "Times New Roman", "Microsoft YaHei", SimHei;
      margin-top: 20px;
    }
    .item_cards_content {
      width: 100%;
      display: flex;
      margin-top: 60px;
      padding: 0px 80px;
      justify-content: space-between;
      flex-wrap: wrap;
      .itme {
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-bottom: 70px;
        .item_card {
          width: 50%;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
        }
        .one_title {
          font-size: 30px;
          margin-top: 30px;
          font-weight: bold;
          margin-bottom: 15px;
        }
        .round {
          width: 125px;
          height: 125px;
          background: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            display: flex;
            width: 118px;
            height: 118px;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
  .download_btn {
    color: #fff;
    margin: 10px auto 0 auto;
    font-size: 36px;
    text-align: center;
    width: 580px;
    height: 80px;
    line-height: 80px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #ff6391;
    -webkit-box-shadow: 4px 7px rgba(35, 38, 100, 0.3);
    -moz-box-shadow: 4px 7px rgba(35, 38, 100, 0.3);
    box-shadow: 4px 7px rgba(35, 38, 100, 0.3);
    background-image: -webkit-linear-gradient(bottom, #ff6091, #ffd780);
    background-image: -moz-linear-gradient(bottom, #ff6091, #ffd780);
    background-image: -o-linear-gradient(bottom, #ff6091, #ffd780);
    background-image: -ms-linear-gradient(bottom, #ff6091, #ffd780);
    background-image: linear-gradient(to top, #ff6091, #ffd780);
  }
  .mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
  }
  .regest_alert {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 660px;
    background: #fff;
    z-index: 5;
    border-radius: 15px;
    border: 1px solid #ccc;
    padding: 45px;
    box-sizing: border-box;
    text-align: center;

    .input-group {
      margin-top: 50px;
      position: relative;
      label {
        display: block;
        position: absolute;
        right: -4px;
        background: #fbedda;
        color: #d0c5b5;
        top: 0px;
        width: 200px;
        height: 100%;
        line-height: 80px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        box-sizing: border-box;
      }
      input {
        width: 100%;
        height: 80px;
        text-indent: 25px;
        border-radius: 15px;
        border: 1px solid #ccc;
        font-size: 30px;
      }
      .sbumit_btn {
        display: block;
        color: #fff;
        font-size: 36px;
        letter-spacing: 15px;
        text-align: center;
        text-indent: 15px;
        width: 100%;
        height: 80px;
        line-height: 80px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background-color: #ff6391;
        background-image: -webkit-linear-gradient(bottom, #ff6091, #ffd780);
        background-image: -moz-linear-gradient(bottom, #ff6091, #ffd780);
        background-image: -o-linear-gradient(bottom, #ff6091, #ffd780);
        background-image: -ms-linear-gradient(bottom, #ff6091, #ffd780);
        background-image: linear-gradient(to top, #ff6091, #ffd780);
      }
    }
  }
  .success_dilog {
    z-index: 999;
    width: 626px;
    height: 647px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../../public/imgs/new_regist/success.png") center no-repeat;
    background-size: contain;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    .download_btn {
      margin-bottom: 70px;
      margin-left: 80px;
      margin-right: 80px;
      box-shadow: none;
    }
  }
}
</style>
